<template>
  <div class="comright flexC">
    <div class="category flex1 flexC">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          协同监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p
            class="font_s16 Bold subtitle textC"
            style="color:#84BBFF; line-height: 1.5625rem;width: 4.75rem;height: 1.5625rem;    border: 1px solid #5aa1f8;    border-radius: 13px;"
            @click="model14 = true"
          >
            监管周期
          </p>
        </div>
      </div>
      <div class="flex1 flexC textC">
        <ul class="flex1 flex">
          <li class="flex1" @click="wcapacitymodel = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">83</p>
            <p class="Medium font_s16 colorF">未协同数</p>
          </li>
          <li class="flex1" @click="model15 = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">3354</p>
            <p class="Medium font_s16 colorF">民政牵头数</p>
          </li>
          <li class="flex1">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">3271</p>
            <p class="Medium font_s16 colorF">
              其他单位
              <br />
              已协同
            </p>
          </li>
        </ul>
        <ul class="flex1 flex">
          <li class="flex1" @click="qcapacitymodel = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">1</p>
            <p class="Medium font_s16 colorF">
              其他单位
              <br />
              牵头数
            </p>
          </li>
          <li class="flex1"  @click="model16 = true">

            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">1</p>
            <p class="Medium font_s16 colorF">民政协同数</p>
          </li>
          <li class="flex1">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">0</p>
            <p class="Medium font_s16 colorF">未协同数</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="category flex1">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          监管要素
        </p>
        <div class="flex flex1 JustifyContentFE">
           <p
            class="font_s16 Bold subtitle textC"
            style="color:#84BBFF; line-height: 1.5625rem;width: 4.75rem;height: 1.5625rem;    border: 1px solid #5aa1f8;    border-radius: 13px;"
            @click="capacitymodels = true"
          >
            执法流程
          </p>
          <p style="padding: 0.3125rem;"></p>
          <p
            class="font_s16 Bold subtitle textC"
            style="color:#84BBFF; line-height: 1.5625rem;width: 4.75rem;height: 1.5625rem;    border: 1px solid #5aa1f8;    border-radius: 13px;"
            @click="capacitymodel = true"
          >
            智能发现
          </p>
        </div>
      </div>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar" @click="model7 = true">
        <span>证书已过期</span>
        <span>{{ creditForm.gyxy8 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar1" @click="model1 = true">
        <span>信访舆情</span>
        <span>{{ creditForm.gyxy2 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar" @click="model2 = true">
        <span>社会组织违规情况</span>
        <span>{{ creditForm.gyxy3 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar1" @click="model3 = true">
        <span>非法社会组织举报</span>
        <span>{{ creditForm.gyxy4 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar" @click="model17 = true">
        <span>年检不合格</span>
        <span>{{ creditForm.gyxy14 }}</span>
      </p>
    </div>

    <Modal v-if="model1" @hidden="hidden5"><img class="bj" src="../../assets/img/data/bjdata/01.png" alt="" /></Modal>
    <Modal v-if="model2" @hidden="hidden6"><img class="bj" src="../../assets/img/data/bjdata/02.png" alt="" /></Modal>
    <Modal v-if="model3" @hidden="hidden7"><img class="bj" src="../../assets/img/data/bjdata/03.png" alt="" /></Modal>
    <Modal v-if="model7" @hidden="hidden8"><img class="bj" src="../../assets/img/data/bjdata/07.png" alt="" /></Modal>
    <Modal v-if="model11" @hidden="hidden11"><img class="bj" src="../../assets/img/data/bjdata/11.png" alt="" /></Modal>
    <Modal v-if="model14" @hidden="hidden14">
      <div class="bj4 flexC AlignItemsC JustifyContentSA">
        <p class="colorF Bold font_s40" style="padding:1rem 20rem; border-bottom: beige 0.1rem solid;">监管生命周期</p>
        <img style="" src="../../assets/img/organization/22.png" alt="" />
      </div>
    </Modal>
    <Modal v-if="model15" @hidden="hidden15"><img class="bj" src="../../assets/img/comprehensive/112.png" alt="" /></Modal>
    <Modal v-if="model16" @hidden="hidden16"><img class="bj" src="../../assets/img/comprehensive/113.png" alt="" /></Modal>
    <Modal v-if="model17" @hidden="hidden17"><img class="bj" src="../../assets/img/data/bjdata/12.png" alt="" /></Modal>
    <Modal v-if="wcapacitymodel" @hidden="hidden3"><img class="bj3" src="../../assets/img/comprehensive/109.png" alt="" /></Modal>
    <Modal v-if="qcapacitymodel" @hidden="hidden4"><img class="bj3" src="../../assets/img/comprehensive/110.png" alt="" /></Modal>
    <Modal v-if="capacitymodel" @hidden="hidden"><img class="bj3" src="../../assets/img/comprehensive/102.png" alt="" /></Modal>
    <Modal v-if="capacitymodels" @hidden="hidden1"><img class="bj" src="../../assets/img/comprehensive/106.png" alt="" /></Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
export default {
  name: 'ComRight',
  components: {
    Modal
  },
  data () {
    return {
      model1: false,
      model2: false,
      model3: false,
      model7: false,
      model11: false,
      model14: false,
      model15: false,
      model16: false,
      model17: false,
      wcapacitymodel: false,
      qcapacitymodel: false,
      capacitymodel: false,
      capacitymodels: false,
      creditForm: {
        gyxy1: 0,
        gyxy2: 0,
        gyxy3: 0,
        gyxy4: 0,
        gyxy5: 0,
        gyxy6: 0,
        gyxy7: 0,
        gyxy8: 0,
        gyxy9: 0,
        gyxy10: 0,
        gyxy11: 0,
        gyxy12: 0,
        gyxy13: 0,
        gyxy14: 0
      }
    }
  },
  methods: {
    hidden () {
      this.capacitymodel = false
    },
    hidden1 () {
      this.capacitymodels = false
    },
    hidden3 () {
      this.wcapacitymodel = false
    },
    hidden4 () {
      this.qcapacitymodel = false
    },
    hidden5 () {
      this.model1 = false
    },
    hidden6 () {
      this.model2 = false
    },
    hidden7 () {
      this.model3 = false
    },
    hidden8 () {
      this.model7 = false
    },
    hidden11 () {
      this.model11 = false
    },

    hidden14 () {
      this.model14 = false
    },
    hidden15 () {
      this.model15 = false
    },
    hidden16 () {
      this.model16 = false
    },
    hidden17 () {
      this.model17 = false
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0
      this.creditForm.gyxy3 = 0
      this.creditForm.gyxy4 = 0
      this.creditForm.gyxy5 = 0
      this.creditForm.gyxy6 = 0
      this.creditForm.gyxy7 = 0
      this.creditForm.gyxy8 = 0
      this.creditForm.gyxy9 = 0
      this.creditForm.gyxy10 = 0
      this.creditForm.gyxy11 = 0
      this.creditForm.gyxy13 = 0
      this.creditForm.gyxy14 = 0

      var creditInterval1 = null
      var creditInterval2 = null
      var creditInterval3 = null
      var creditInterval4 = null
      var creditInterval5 = null
      var creditInterval6 = null
      var creditInterval7 = null
      var creditInterval8 = null
      var creditInterval9 = null
      var creditInterval10 = null
      var creditInterval11 = null
      var creditInterval12 = null
      var creditInterval13 = null
      var creditInterval14 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= 4) {
          this.creditForm.gyxy1 = 4
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(4 / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= 14) {
          this.creditForm.gyxy2 = 14
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(14 / 10))
        }
      }, 100)
      creditInterval3 = setInterval(() => {
        if (this.creditForm.gyxy3 >= 1) {
          this.creditForm.gyxy3 = 1
          clearInterval(creditInterval3)
        } else {
          this.creditForm.gyxy3 = parseInt(this.creditForm.gyxy3 + Math.ceil(1 / 10))
        }
      }, 100)
      creditInterval4 = setInterval(() => {
        if (this.creditForm.gyxy4 >= 2) {
          this.creditForm.gyxy4 = 2
          clearInterval(creditInterval4)
        } else {
          this.creditForm.gyxy4 = parseInt(this.creditForm.gyxy4 + Math.ceil(2 / 10))
        }
      }, 100)

      creditInterval5 = setInterval(() => {
        if (this.creditForm.gyxy5 >= 8) {
          this.creditForm.gyxy5 = 8
          clearInterval(creditInterval5)
        } else {
          this.creditForm.gyxy5 = parseInt(this.creditForm.gyxy5 + Math.ceil(8 / 10))
        }
      }, 100)
      creditInterval6 = setInterval(() => {
        if (this.creditForm.gyxy6 >= 25) {
          this.creditForm.gyxy6 = 25
          clearInterval(creditInterval6)
        } else {
          this.creditForm.gyxy6 = parseInt(this.creditForm.gyxy6 + Math.ceil(25 / 10))
        }
      }, 100)
      creditInterval7 = setInterval(() => {
        if (this.creditForm.gyxy7 >= 13) {
          this.creditForm.gyxy7 = 13
          clearInterval(creditInterval7)
        } else {
          this.creditForm.gyxy7 = parseInt(this.creditForm.gyxy7 + Math.ceil(13 / 10))
        }
      }, 100)
      creditInterval8 = setInterval(() => {
        if (this.creditForm.gyxy8 >= 479) {
          this.creditForm.gyxy8 = 479
          clearInterval(creditInterval8)
        } else {
          this.creditForm.gyxy8 = parseInt(this.creditForm.gyxy8 + Math.ceil(497 / 10))
        }
      }, 100)
      creditInterval9 = setInterval(() => {
        if (this.creditForm.gyxy9 >= 113) {
          this.creditForm.gyxy9 = 113
          clearInterval(creditInterval9)
        } else {
          this.creditForm.gyxy9 = parseInt(this.creditForm.gyxy9 + Math.ceil(113 / 10))
        }
      }, 100)

      creditInterval10 = setInterval(() => {
        if (this.creditForm.gyxy10 >= 231) {
          this.creditForm.gyxy10 = 231
          clearInterval(creditInterval10)
        } else {
          this.creditForm.gyxy10 = parseInt(this.creditForm.gyxy10 + Math.ceil(231 / 10))
        }
      }, 100)

      creditInterval11 = setInterval(() => {
        if (this.creditForm.gyxy11 >= 368) {
          this.creditForm.gyxy11 = 368
          clearInterval(creditInterval11)
        } else {
          this.creditForm.gyxy11 = parseInt(this.creditForm.gyxy11 + Math.ceil(368 / 10))
        }
      }, 100)

      creditInterval12 = setInterval(() => {
        if (this.creditForm.gyxy12 >= 0) {
          this.creditForm.gyxy12 = 0
          clearInterval(creditInterval12)
        } else {
          this.creditForm.gyxy12 = parseInt(this.creditForm.gyxy12 + Math.ceil(0 / 10))
        }
      }, 100)

      creditInterval13 = setInterval(() => {
        if (this.creditForm.gyxy13 >= 4) {
          this.creditForm.gyxy13 = 4
          clearInterval(creditInterval13)
        } else {
          this.creditForm.gyxy13 = parseInt(this.creditForm.gyxy13 + Math.ceil(4 / 10))
        }
      }, 100)
      creditInterval14 = setInterval(() => {
        if (this.creditForm.gyxy14 >= 360) {
          this.creditForm.gyxy14 = 360
          clearInterval(creditInterval14)
        } else {
          this.creditForm.gyxy14 = parseInt(this.creditForm.gyxy14 + Math.ceil(360 / 10))
        }
      }, 100)
    }, 5000)
  }
}
</script>
<style lang="scss" scoped>
.comright{
  position: absolute;
  top: 15%;
  right:1rem;
  height: 50%;
  width: 20%;
  .category{
  padding:0.5rem 1.5rem;
  background: url(../../assets/img/comprehensive/20.png) no-repeat;
  background-size: 100% 100%;
    .square{
      background: url(../../assets/img/comprehensive/21.png) no-repeat;
      background-size: 100% 100%;
    }
    .bar,.bar1{
      margin: 1rem 0;
      padding: 0 1rem;
      line-height: 1.875rem;

    }
    .bar{
      background: #1854d1;
    }
    .bar1{
      background::#2a509f
    }
  }
  .bj {
    width: 95%;
    height: 95%;
    position: absolute;
    top: 5%;
 left: 2%;
  }
  .bj3 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .bj4{
   position: absolute;
   top: 15%;
    left: 25%;
   width: 50%;
   height: 70%;
   background-image: url('../../assets/img/comprehensive/components/bg_popout.png');
   background-size: 100% 100%;
   img{
     width: 75%;
     height: 75%;
   }
  }
}
</style>
